<template>
	<div>
		<div v-for="(key,val,index) in userInfos" :key="index">{{key}}:{{val}}</div>
		<button @click="add">修改数据</button>
	</div>
</template>

<script>
export default {
	data() {
		return {
			userInfos: {
				name: "王一博",
				age: 20
			}
		};
	},
	created() {
		let user = {
			name: "王一博",
			age: 20,
			words: {
				adds: "g区18号",
				tell: "1727283848744",
				cars: ["宝马", "奥迪", "本田"]
			}
		};
		// 把目标对象变成代理 对象
		// 使用prory 从new Proxy开始接受2个参数
		// 参数1：target目标对象----》 user
		// 参数2：Handel 处理器对象，用来监视数据及数据操作----》{}
		const proxyUser = new Proxy(user, {
			// 获取目标对象的某个属性值
			//target目标对象。property被获取的属性名。
			get(target, prop) {
				console.log("get方法调用了");
				return Reflect.get(target, prop);
			},
			// 修改、添加目标对象的属性
			//target目标对象。property被获取的属性名 value 值
			set(target, prop, value) {
				console.log("set方法调用了");
				return Reflect.set(target, prop, value);
			},
			// 删除目标对象的某个属性值
			//target目标对象。property被获取的属性名
			deleteProperty(target, prop) {
				console.log("delete方法调用了");
				return Reflect.deleteProperty(target, prop);
			}
		});
		// 通过代理对象获取目标对象中的某个属性值
		console.log(proxyUser.name);
		// 通过代理对象更新目标对象上的某个属性值
		proxyUser.name = "肖战";
		console.log("修改属性值:", user);
		//通过代理对象向目标对象添加一个新的属性
		proxyUser.sex = "男";
		console.log("添加新属性:", user);
		//通过代理对象删除目标对象的某个属性值
		delete proxyUser.age;
		console.log("删除age 后:", user);
		//深度的添加属性值
		proxyUser.words.name = "航天信息";
		console.log("深度的添加属性值:", user);
	},
	methods: {
		add() {
			this.userInfos.sex = "男";
			console.log("深度的添加属性值2:", this.userInfos);
		}
	}
};
</script>

<style>
</style>